<template>
  <text :style="{ color: color, 'font-size': size + 'px' }" class="gg-icons" :class="rotate?'gg-icons-turn':''"
    @click="_onClick">{{icons[type]}}</text>
</template>

<script>
import icons from './icons.js';
// #ifdef APP-NVUE
var domModule = weex.requireModule('dom');
/* 基础图标库 */
import fontBase from './iconfont/font-base.js';
domModule.addRule('fontFace', fontBase);

/* 箭头相关图标库 */
import fontArrow from './iconfont/font-arrow.js';
domModule.addRule('fontFace', fontArrow);

/* 钱包相关图标库 */
import fontWallet from './iconfont/font-wallet.js';
domModule.addRule('fontFace', fontWallet);

/* 状态相关图标库 */
import fontStatus from './iconfont/font-status.js';
domModule.addRule('fontFace', fontStatus);

/* 订单相关图标库 */
import fontOrder from './iconfont/font-order.js';
domModule.addRule('fontFace', fontOrder);

/* 人物相关图标库 */
import fontPeople from './iconfont/font-people.js';
domModule.addRule('fontFace', fontPeople);

/* 媒体相关图标库 */
import fontMedia from './iconfont/font-media.js';
domModule.addRule('fontFace', fontMedia);

/* 商城相关图标库 */
import fontMall from './iconfont/font-mall.js';
domModule.addRule('fontFace', fontMall);
// #endif

export default {
  name: 'GgIcons',
  props: {
    type: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: '#333333'
    },
    size: {
      type: [Number, String],
      default: 16
    },
    rotate: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  data() {
    return {
      icons: icons
    }
  },
  created: function () {
  },
  methods: {
    _onClick() {
      this.$emit('click')
    }
  }
}
</script>

<style>
/* #ifndef APP-NVUE */
/* 基础相关图标库 */
@import url("./iconfont/font-base.css");

/* 箭头相关图标库 */
@import url("./iconfont/font-arrow.css");

/* 钱包相关图标库 */
@import url("./iconfont/font-wallet.css");

/* 状态相关图标库 */
@import url("./iconfont/font-status.css");

/* 订单相关图标库 */
@import url("./iconfont/font-order.css");

/* 行为相关图标库 */
@import url("./iconfont/font-action.css");

/* 人物相关图标库 */
@import url("./iconfont/font-people.css");

/* 媒体相关图标库 */
@import url("./iconfont/font-media.css");

/* 商城相关图标库 */
@import url("./iconfont/font-mall.css");
/* #endif */

.gg-icons {
  font-family: gg-icon-base, gg-icon-arrow, gg-icon-wallet, gg-icon-status,
    gg-icon-order, gg-icon-action, gg-icon-people, gg-icon-media, gg-icon-mall;
  text-decoration: none;
  text-align: center;
}
.gg-icons-turn {
  animation: turn 1s linear infinite;
  display: inline-block;
}
@keyframes turn {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>